<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading='loading'>
            <div class="form-title">视频详情</div>
            <el-form :model="dataForm" ref="dataForm" label-width="90px" class="form" label-position='right'>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">基本信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21" class="item">
                            <el-col :span="12">
                                <el-form-item label="视频名称：">
                                    <span>{{dataForm.sVideoName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" class="item">
                            <el-col :span="12">
                                <el-form-item label="视频封面：">
                                     <img alt="" :src="dataForm.sCoverUrl">
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" class="item">
                            <el-col :span="12">
                                <el-form-item label="视频：">
                                     <video class="video" style="max-width:600px" controls :autoplay="false" buffered :src="dataForm.sVideoUrl"></video>
                                     <p style="color:#ccc">无法正常预览的视频，可能是视频的编码不正确，需要您转换成MP4格式H.264 视频编码的视频再上传。</p>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" class="item">
                            <el-col :span="22">
                                <el-form-item label="视频介绍：">
                                    <div class="s-desc panel-body" v-html="dataForm.sDesc"></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">上架信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="付费形式：">
                                    <el-radio class="radio" v-model="dataForm.sPayType" label="0" :disabled="true">免费</el-radio>
                                    <el-radio class="radio" v-model="dataForm.sPayType" label="1" :disabled="true">优惠</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41" v-if="dataForm.sPayType == '1'">
                            <div class='original-price'>
                                <el-col :span="5">
                                    <el-form-item label="原价：" label-width="60px">
                                        <el-input v-model.number="dataForm.sOriginalPrice" style="width:100%;" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item label="现价：" label-width="60px">
                                        <el-input v-model.number="dataForm.sNowPrice" :disabled="true" style="width:100%;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label="所属分类：">
                                    <el-radio-group v-model="dataForm.fTypeId">
                                        <el-radio v-for="item in fTypeIdList" :label="item.pId" :key="item.pId" :disabled="true">{{item.sName}}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="权重：" v-if="dataForm.sPriority">
                                    <span>{{dataForm.sPriority}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">用户评价（{{this.pageQuery.total}}）</span>
                    </div>
                    <div class="form-content">
                        <el-table :data="tableData"  style="width: 100%" :show-header='true' v-loading = 'tableLoading'>                     
                            <el-table-column prop="creatorName" label="用户名称" width="140px">
                                <template scope="scope">
                                    {{!scope.row.creatorName ? '--' : scope.row.creatorName}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="sContent" label="评论内容">
                                <template scope="scope">
                                    {{!scope.row.sContent ? '--' : scope.row.sContent}}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100px">
                                <template scope="scope">
                                    <el-button type="text" class="btn-success" @click="deleteComment(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-row type="flex" class="row-bg" justify="end">
                            <div class="pagination-container">
                                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                                </el-pagination>
                            </div>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item>
                                <div class="footer">
                                    <el-button @click="goBack()">返回</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../../../layout/Levelbar';
    import {getScholarInfo, listAdvertByCondition, pageScholarComment, deleteScholarComment} from 'api/eStudyBug';
    import { mapGetters, mapState, mapActions } from 'vuex';

    export default {
        name: 'eStudybugVideoDetail',
        components: { Levelbar },
        created() {
            this.getQuery(),
            this.getTypeList(),
            this.getomment()
        },
        data() {
            return {
                imgTrue: true,
                loading: false,
                tableLoading: false,
                pageQuery: {
                    currentpage: 1,
                    total: 1
                },
                // 用户评价
                tableData: [],
                sCoverUrlList: [],
                dataForm: {
                    fileName: '',
                    sVideoName: '',
                    sCoverUrl: '',
                    videoUrl: '',
                    sDesc: '',
                    sPayType: '0',
                    sOriginalPrice: '',
                    sNowPrice: '0.00',
                    fTypeId: '',
                    sPriority: ''
                },
                // 所属分类
                fTypeIdList: []
            };
        },
        computed: {
            ...mapGetters([
                'uid'
            ]),
            ...mapState({
                config: state => state.config.table
            })
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.getomment();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.getomment();
            },
            // 获取数据
            getQuery() {
                getScholarInfo(this.$route.params.pid).then(data => {
                    this.dataForm = data.data.content;
                    this.dataForm.sPayType = data.data.content.sPayType + '';
                })
            },
            // 获取分类
            getTypeList() {
                listAdvertByCondition().then(data => {
                    this.fTypeIdList = data.data.content
                })
            },

            // 分页查询e启学霸评论
            getomment() {
                this.tableLoading = true;
                pageScholarComment(
                    this.$route.params.pid,
                    this.pageQuery.currentpage,
                    this.config.pageSize
                    ).then(data => {
                        this.tableLoading = false;
                        this.tableData = data.data.content.list;
                        this.pageQuery.total = data.data.content.pagination.total;
                    }).catch(Error => {
                        this.$message(Error);
                    })
            },
          
            goBack(dataForm) {
                this.$router.push({ path: '/eStudybug/eStudybug' });
            },
            deleteComment(obj) {
                this.$confirm('此操作将永久删除该评论, 是否继续?', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ''
                }).then(() => {
                    this.tableLoading = true;
                    deleteScholarComment(obj.pId).then(data => {
                        this.tableLoading = false;
                        this.getomment();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(Error => {
                        this.tableLoading = false;
                        this.$message(Error);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../../../../static/tinymce/skins/lightgray/content.min.css";
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;

        @mixin showTitle() {
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
        .form-box {
            padding: 0px 50px;
            @include showTitle();
            .form-title {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
            }
            .form {
                .form-item {
                    padding-bottom: 40px;
                    .form-item-title {
                        margin: 40px 0;
                        font-size: 14px;
                        color: #333;
                        line-height: 14px;
                        border-left: 4px solid #ff5e2c;
                        text-indent: 16px;
                        .note-css {
                            vertical-align: middle;
                            display: inline-block;
                            width: 4px;
                            height: 14px;
                            margin-right: 16px;
                            border-left: 3px solid #ff5e2c;
                        }
                    }
                    .form-content {
                        margin: 0 8px;
                        .original-price {
                            padding-left:102px;
                            // overflow:hidden;
                            margin-bottom: 20px;
                        }
                        .subject-radio {
                            padding-left:82px;
                        }
                        .item {
                            margin-bottom: 20px;
                            .s-desc {
                                max-width: 1050px;
                                overflow: hidden; 
                                word-break: break-word;
                                border:1px solid #ddd;
                                border-radius: 4px;
                                padding: 20px;
                            }
                            .video {
                                max-width: 700px;
                                height: auto;
                            }
                        }
                    }
                    .item {
                        margin-bottom: 20px;
                    }
                    .back {
                        margin-top: 20px;
                    }
                    .footer {
                        text-align: center;
                        margin-top: 40px;
                    }
                    .title-way {
                        padding-right: 15px;
                    }
                    .control {
                        text-align: right;
                    }
                    img {
                        max-width: 700px;
                        height: auto;
                    }
                }
            }
        }
    }
</style>